@charset "utf-8";

@import "reset";
@import "common";

.cooperation_projects_warp{
    width: 91%;
    margin: 0 auto;
    position: relative;
    >p{
        font-size: 14px;
        color: #4d4d4d;
        text-align: right;
        line-height: 43px;
        border-top: 1px solid #4d4d4d;
    }
    .projects_warp_content{
        width: 90%;
        margin: 0 auto;
        padding: 50px 55px 40px;
        background: #FFFFFF;
        >h2{
            font-size: 30px;
            color: #0dafd2;
            margin-bottom: 25px;
        }
        >div{
            margin-bottom: 21px;
            >div{
            &:nth-of-type(1){
                float: left;
                width: 65%;
                height: 285px;
                vertical-align: middle;
                overflow: hidden;
                >img{
                    width: 100%;
                }
            
            }
            &:nth-of-type(2){
                    float: right;
                >a{
                    display: block;
                    width: 145px;
                    height: 40px;
                    font-size: 18px;
                    color: #FFFFFF;
                    line-height:40px; 
                    text-align: center;
                    margin-bottom:18px;
                &:nth-of-type(1){
                    background: #0dafd2;
                }
                &:nth-of-type(2){
                    background: #afafaf;
                }
                &:hover{
                    background-color:#099ab9;
                }
                }
            }
            }
            
        }
        >p{
            width: 65%;
            font-size: 14px;
            color: #636262;
            line-height: 24px;
            letter-spacing: 1px;

        }
        >ul{
            margin-top: 62px;
            margin-bottom: 57px;
        &:nth-of-type(1){
            >li{
                font-size: 14px;
                color: #636262;
                line-height: 30px;
                letter-spacing: 1px;
            &:nth-of-type(1){
                font-size: 15px;
                color: #333333;
                font-weight: bold;
            }
            &:nth-of-type(7){
                margin-top: 45px;
                >span{
                    font-size: 15px;
                    color: #333333; 
                    font-weight: bold;
                }
            }
            } 
        }
        &:nth-of-type(2){
            font-size: 12px;
            >li{
                width: 24.5%;
                height: 130px;
                vertical-align: middle;
                overflow: hidden;
                display: inline-block;
                >img{
                    height: 100%;
                }
            &:last-of-type{
                margin-right: 0;
            }
            }
        }
        }
    }
    .projects_warp_img{
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.3);
        z-index: 10;
        >div{
            width: 600px;
            height: 400px;
            background: #FFFFFF;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            >div{
                width: 80%;
                height: 300px;
                overflow: hidden;
                vertical-align: middle;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 20px;
                >img{
                    width: 100%;
                }
            }
            >span{
                float: right;
                color: red;
                font-size: 18px;
                margin-top: 10px;
                margin-right: 20px;
                cursor: pointer;
            }
            a{
                position: absolute;
                font-size: 33px;
                color: #333;
            &:nth-of-type(1){
                left: 10px;
                top: 47%;
                transform: rotate(-90deg) translateZ(0);
            }
            &:nth-of-type(2){
                right: 10px;
                top: 47%;
                transform: rotate(90deg) translateZ(0);
            }
            }
        }
    }
}
